<template>
  <div class="particulars" @click="globalClick">
  	  <!--保存笔记-->
  	  <keepNote v-if="clickShow === 0"/>
  	  <!--查看笔记-->
  	  <chaKanNote v-if="clickShow === 1"/>
      <headers></headers>
      <div id="particulars">
        <!-- 内容 -->
        <div class="particulars-l">
          <div class="parContent">
            <div class="parContent-top">
               <div class="parContentTop-span">
                  <span>{{getData.articleInfo.artTitle}}</span>
               </div>
               <div class="parContentFooter">
                  <div class="parFooter-l">
                      <span>
                          <span>发布时间:</span>
                          <span>{{getData.articleInfo.artTime}}</span>
                      </span>
                      <span>
                          <span>来源:</span>
                          <span>明日情报</span>
                      </span>
                  </div>
                  <div class="parFooter-r">
                      <i></i>
                      <i></i>
                      <i></i>
                      <i></i>
                  </div>
               </div>

            </div>
            <!-- 文本内容 -->
            <div class="parcontent-content" id="div" @click="contentClick" @contextmenu = "contentCurrent" ref="content" @mouseup ="parMouserup">
                {{getData.articleInfo.artCont}}
            </div>
            <contentComment :getData = "getData"></contentComment>
            <page :persentPage="pageNum" :pages="pages"></page>            
          </div>
        </div>
        <!-- 相关事件 -->
        <div class="particulars-r">
        	<div v-for="(value,index) in relatedData" :key="index">
        		<relatedEvents :eventIndex="index" :eventValue="value"></relatedEvents>
        	</div>
        </div>
        <!-- 我的笔记弹出框 -->
        <div class="particulars-show" v-show="current" :style="currentStyle" @click="currentPrevent">
            <div class="parShow-content">
                <div class="parshow-content-title">
                    <span class="username"></span>
                    <span class="date">2017-12-07 10:00{{newDate}}</span>
                </div>
                <div class="title-input">
                    <textarea name="" id="" v-model="contentText"></textarea>
                </div>
                <div class="keep">
                    <span class="delete" @click="keepDelete">删除</span>
                    <span class="keepBut">
                      <i class="keepButL"></i>
                      <i class="keepButR"></i>
                    </span>
                </div>
            </div>
        </div>
        <!-- 我的笔记弹出框 -->
        <!-- <div class="particulars-show" v-show="current" :style="currentStyle" @click="currentPrevent">
            <div class="parShow-content">
                <div class="parshow-content-title">
                    <span class="username"></span>
                    <span class="date">2017-12-07 10:00</span>
                </div>
                <div class="title-input">
                    <textarea name="" id="" v-model="noteShowText" disabled="noteShowEdit"></textarea>
                </div>
                <div class="keep">
                    <span class="delete" @click="keepDelete">删除</span>
                    <span class="keepBut">
                      <i>z</i>
                      <i>y</i>
                    </span>
                </div>
            </div>
        </div> -->
        <!-- 笔记显示框 -->
        <div class="particularsLook" :style="lookStyle" v-show="lookShow" @mouseover="lookShowM" @mouseout="lookHide">
            <div class="particularsLookTitle">
                <span>标题：</span>
                <span>{{particularsLookTitle}}</span>
            </div>
            <div class="particularsLookContent">
                <span>内容：</span>
                <span>{{particularsLookContent}}</span>
            </div>
            <div class="particularsLookHtml">
                <span>原文：</span>
                <span>{{particularsLookHtml}}</span>
            </div>
        </div>
        <div class="toolbar" v-if="toolbarshow">
          <div class="operation">
            <div class="toolbarTop" @click="toolbarBut">
              <ul>
                <li class="baocun">
                  <i>保存</i>
                  保存
                </li>
                <li class="quxiao">
                  <i>取消</i>
                  取消
                </li>
                <li class="cexiao">
                  <i>撤销</i>
                  撤销
                </li>
                <li class="chongzuo">
                  <i>重做</i>
                  重做
                </li>
              </ul>
            </div>
            <div class="toolbarFoot">操作</div>
          </div>
          <div class="fontStyle">
            <div class="toolbarTop" @click="toolbarBut">
              <ul>
                <li class="jiacu">
                  <i>加粗</i>
                  加粗
                </li>
                <li class="xieti"><i>斜体</i>斜体</li>
                <li class="fontColor"><i>字体颜色</i>字体颜色</li>
                <li class="xiahuaxian"><i>下划线</i>下划线</li>
              </ul>
            </div>
            <div class="toolbarFoot">字体样式</div>
          </div>
          <div classs="insert">
            <div class="toolbarTop" @click="toolbarBut">
              <ul>
                <li class="biaozhu"><i>批注</i>批注</li>
              </ul>
            </div>
            <div class="toolbarFoot">插入</div>
          </div>
        </div>
      </div>
      <div class="particularsTool">
        <ul @click="toolClick">
          <li>制作简报</li>
          <li>网要发稿</li>
          <li>加入简报</li>
          <li class="notebook"><i></i>笔记</li>
          <li><i></i>评论</li>
        </ul>
      </div>
      <div class="top" @click="scrollTop">
        <button><i></i></button>
      </div>
  </div>
</template> 

<script>
import Header from '@/components/header' // 头部组件引入
import Footer from '@/components/footer' // 底部组件引入
import RelatedEvents from '@/components/public/relatedEvent' // 右侧相关事件引入
import KeepNote from '@/components/public/keepNote' // 是否保存笔记
import ChaKanNote from '@/components/public/chaKanNote' // 查看笔记
import contentComment from '@/components/public/Contentcomment'
import page from '@/components/public/paging'

export default {
  data () {
    return {
      toolbarshow: false,
      current: false, //   笔记弹出框
      lookShow: false, //  笔记显示框
      shadeHeight: 0, //   遮罩高度
      currentNum: 1,  //   笔记数目
      currentX: 0,  //   记录坐标x
      currentY: 0,  //   记录坐标y
      contentText: '',  // textareaValue
      titleText: '',  //  输入框标题内容
      selectionTxt: '', //  鼠标选中的文字
      selectionX: 0,
      particularsLookTitle: '', //  笔记标题
      particularsLookContent: '', // 笔记内容
      particularsLookHtml: '', // 笔记原文
      CoordinateY: 0,
      CoordinateX: 0, // 笔记显示框坐标X
      lookStyle: { // 笔记显示框定位
        left: 0,
        top: 0
      },
      currentStyle: { // 笔记显示框定位
        left: 0,
        top: 0
      },
      currentBox: true, // 鼠标是否移入显示框
    //   textButton:
      range: '',
      selection: '',
      currentLabel: '',
      selectionHtml: '',
      currentInfo: [],
      currentHtmls: [],
      noteContentData: [],
      currentInitHtml: '',
      bbb: {},
      relatedData: [], // 右侧导航栏数据
      zanShow: [ // 点赞,收藏，举报
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '点赞成功'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '收藏成功'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '最多可添加10篇文章'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '您发表的内容涉及敏感词，<br>提交举报失败'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '提交举报失败'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '提交举报成功'
        },
        {
          'imgUrl': require('../../assets/public/right.png'),
          'pContent': '加入简报成功'
        }
      ],
      zanIndex: 0, // 弹出框内容
      clickShow: '', // 弹出框的类型
      newDate: '',
      getData: '',
      pageNum: 0,
      pages: 0
    }
  },
  components: { // 头部,底部组件引入
    'headers': Header,
    'footers': Footer,
    'relatedEvents': RelatedEvents,
    'contentComment': contentComment,
    'keepNote': KeepNote,
    'chaKanNote': ChaKanNote,
    'page': page
  },
  mounted: function () {
    var T = this
    this.shadeHeight = document.body.scrollHeight + 300 + 'px'
    this.$http.get('http://192.168.31.217:8080/article/info/2')
    .then(function (response) {
      T.getData = response.data.data
      T.pageNum = response.data.data.pageResult.pageNum
      T.pages = response.data.data.pageResult.pages
    })
    this.pageNum = this.getData.pageResult.pageNum
    this.pages = this.getData.pageResult.pages
  },
  created () {
    var that = this
    that.$http.get('../../../../../static/json/relatedEvent.json')
    .then(res => {
      var data = res.data.data
      that.relatedData = data
    })
    .catch(error => {
      console.log(error)
    })
  },
  methods: {
    toolClick: function (event) {
      switch (event.target.className) {
        case 'notebook':
          this.toolbarshow = true
          break
      }
    },
    globalClick: function () {
      this.currentShow()
    },
    // 保存笔记
    currentShow: function () {
      if (this.contentText !== '') {
        var currentObj = new Object
        currentObj['id'] = this.currentNum
        currentObj['noteContent'] = this.contentText
        this.noteContentData.push(currentObj)
        this.contentText = ''
        this.current = false
        this.currentNum = this.currentNum + 1
      }
    },
    toolbarBut: function (event) {
      if (event.target.nodeName === 'LI' || event.target.nodeName === 'I') {
        switch (event.target.innerText) {
          case '保存': 
            this.currentConserve()
            break
          case '取消':
            this.currentCancel()
            break            
          case '撤销':
            this.currentRevoke()
            break
          case '重做':
            this.currentInit()
            break
          case '加粗':
            this.currentFootweight()
            break            
          case '斜体':
            this.currentItalic()
            break
          case '字体颜色':
            this.currentFontColor()
            break
          case '下划线':
            this.currentUnderline()
            break
          case '批注':
            this.currentPostil()
            break
        }
      }
     
    },
    // 保存
    currentConserve: function () {
      this.toolbarshow = false
    },
    // 取消
    currentCancel: function () {
      this.toolbarshow = false
      this.clickShow = 0
    },
    // 加粗
    currentFootweight: function () {
      if (this.selectionHtml !== '') {
        this.currentHtmls.push(this.$refs.content.innerHTML)      
        this.currentLabel = 'B'
        this.changeFontStyle(this.currentLabel)
      }
    },
    // 斜体
    currentItalic: function () {
      if (this.selectionHtml !== '') {
        this.currentHtmls.push(this.$refs.content.innerHTML)      
        this.currentLabel = 'i'
        this.changeFontStyle(this.currentLabel)
      }
    },
    // 字体颜色
    currentFontColor: function () {
      if (this.selectionHtml !== '') {
        this.currentHtmls.push(this.$refs.content.innerHTML)      
        this.currentLabel = 'c style="color: red"'
        this.changeFontStyle(this.currentLabel)
      }
    },
    // 下划线
    currentUnderline: function () {
      if (this.selectionHtml !== '') {
        this.currentHtmls.push(this.$refs.content.innerHTML)      
        this.currentLabel = 'L style="text-decoration: underline"'
        this.changeFontStyle(this.currentLabel)
      }
    },
    // 批注
    currentPostil: function () {
      if (this.selectionHtml !== '') {
        this.currentHtmls.push(this.$refs.content.innerHTML)  
        this.current = true
        this.currentStyle.left = this.CoordinateX + 'px'
        this.currentStyle.top = this.CoordinateY + 'px'
        this.currentLabel = 'F style="color: #FFC045"'
        var addNodeHtml = '<fL style="color: blue" id="fl' + this.currentNum + '" data-id = ' + this.currentNum + '>第' + this.currentNum + '条标注</fL>'
        this.changeFontStyle(this.currentLabel,addNodeHtml)
        this.currentNum = this.currentNum + 1
      }
      window.event? window.event.cancelBubble = true : e.stopPropagation();
    },
    // 撤销
    currentRevoke: function () {
      var htmlsNum = this.currentHtmls.length - 1
      if (htmlsNum > -1 ) {
        this.$refs.content.innerHTML = this.currentHtmls[htmlsNum]
        this.currentHtmls.splice(htmlsNum)
      }
    },
    // 重做
    currentInit: function () {
      this.$refs.content.innerHTML = this.currentInitHtml
    },
    keepDelete: function () {
      var num = this.currentNum - 1
      var fl =  document.getElementById('fl' + num + '')
      var fHtml = fl.parentNode.innerHTML
      var flvHtml = fl.parentNode.firstChild.innerText
      var contentHtml = this.$refs.content.innerHTML.split('<f style="color: #FFC045">' + fHtml + '</f>')
      this.$refs.content.innerHTML = contentHtml.join(flvHtml)
      fl.parentNode.parentNode.removeChild(fl.parentNode)
      this.current = false
      this.currentNum = this.currentNum - 1
    },
    // 改变文字样式方法
    changeFontStyle: function (currentLabel,addNodeHtml) {
      var addNodeHtml = addNodeHtml? addNodeHtml : ''  
      var indexType = this.$refs.content.innerHTML.indexOf(this.selectionHtml)
      if (indexType !== -1 && this.selectionHtml !== '') {
        if (addNodeHtml === '') {
          var contentHtml = this.$refs.content.innerHTML.split(this.selectionHtml)
          this.$refs.content.innerHTML = contentHtml.join('<' + currentLabel + '><v>' + this.selectionHtml + '</v>' + addNodeHtml +'</' + currentLabel + '>')
        } else {
          var contentHtml = this.$refs.content.innerHTML.split(this.selectionHtml)
          this.$refs.content.innerHTML = contentHtml.join('<' + currentLabel + '><v>' + this.selectionHtml + '</v>' + addNodeHtml +'</' + currentLabel + '>')
        }
      } else {
        alert('请重新选择')
      }
    },
    // 获取选中文字的range对象及html
    parMouserup: function (event) {
      var selection = document.getSelection()
      this.range = selection.getRangeAt(0);
      var div = document.createElement('div')
      div.appendChild(this.range.cloneContents())
      this.selectionHtml = div.innerHTML
      this.getCoordinate(event)
    },
    //获取坐标
    getCoordinate: function (event) {
      var e = event || window.event
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop
      var x = e.pageX || e.clientX + scrollX
      var y = e.pageY || e.clientY + scrollY
      this.CoordinateX = x
      this.CoordinateY = y
    },
    currentPrevent: function () {
      window.event? window.event.cancelBubble = true : e.stopPropagation();
    },
    // 点击文本时触发
    contentClick: function (event) {
      if (event.target.nodeName === 'FL') {
        var e = event || window.event
        var eventId = event.target.getAttribute("data-id")
        this.lookShow = true
        this.lookStyle.left = this.currentInfo[eventId].CoordinateX + 'px'
        this.lookStyle.top = this.currentInfo[eventId].CoordinateY + 'px'
        // T.particularsLookTitle = currentData.title
        // T.particularsLookContent = currentData.content
        // T.particularsLookHtml = currentData.selectionTxt
      }
    },
    // 笔记初始化
    currentInit: function () {
      //   this.$http.get('/user?ID=12345')
      //     .then(function (response) {
      //         console.log(response);
      //     })
      //     .catch(function (error) {
      //         console.log(error);
      //     });
      for (var i = 0; i < this.currentContent.length; i++) {
        this.currentNum = Number(this.currentContent[i].id)
        var contentHtml = this.$refs.content.innerHTML.split(this.currentContent[i].selectionTxt)
        this.$refs.content.innerHTML = contentHtml.join('<span style="background:#ff00005e;" class="currentBg"> ' + this.currentContent[i].selectionTxt + '<i class="currentIcon">' + this.currentNum + '</i></span>')
      }
    },
    // 到顶部
    scrollTop: function () {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    // 点击右键触发,获取选中文本,判断是否为空弹出框
    contentCurrent: function (event) {
      if (document.selection) {
        this.selectionTxt = document.selection.createRange().htmlText
      } else {
        var userSelection = window.getSelection()
        var range = userSelection.getRangeAt(0)
        console.log(range)
        console.log(userSelection)
        var div = document.createElement('div')
        div.appendChild(range.cloneContents())
        this.selectionTxt = div.innerHTML
        console.log(range.commonAncestorContainer)
      }
      console.log(this.selectionTxt)
      if (this.selectionTxt !== '') {
        var e = event || window.event
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop
        var x = e.pageX || e.clientX + scrollX
        var y = e.pageY || e.clientY + scrollY
        if (e.target.nodeName === 'IMG') {
          return false
        } else {
          this.current = true
          this.currentX = x
          this.currentY = y - 20
        }
        if (e && e.preventDefault) {
          e.preventDefault()
        } else {
          window.event.returnValue = false
          return false
        }
      }
    },

    
    // 鼠标移入显示框,显示框显示
    lookShowM: function () {
      this.lookShow = true
      this.currentBox = true
    },
    // 鼠标移出显示框,显示框消失
    lookHide: function () {
      this.lookShow = false
      this.currentBox = false
    },
    // 弹框定时器
    tkTimer (shiJian) {
      setTimeout(function () {
        shiJian.clickShow = 0
      }, 3000)
    },
    // 举报子组件中取消
    jbCancel () {
      this.clickShow = 0
    },
    // 举报子组件中确认
    yesJuBao () {
      var that = this
      that.clickShow = 1
      that.zanIndex = 3
      that.tkTimer(that)
    }
  }
}
</script>

<style>
 @import '../../../static/particulars/particulars.css'
</style>